<template>
  <div id="mainchart" ref="barChart"></div>
</template>

<script>
import CommonTitle from "./CommonTitle";
import * as echarts from "echarts";

export default {
  components: {
    CommonTitle,
  },
  mounted() {
    const option = {
      title: {
        text: "前10天订单数据",
        left: "center",
        top: "2%",
        textStyle: {
          color: "#333333",
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none",
        },
        formatter: "日期：{b} <br /> 金额：{c} 元",
      },
      xAxis: {
        name: "日期",
        nameTextStyle: {
          fontWeight: "bold",
          verticalAlign: "top",
          lineHeight: 28,
        },
        data: [
          "06-24",
          "06-25",
          "06-26",
          "06-27",
          "06-28",
          "06-29",
          "06-30",
          "07-01",
          "07-02",
          "07-03",
        ],
        axisLine: {
          lineStyle: {
            color: "#333333",
          },
        },
        axisTick: {
          //是否显示网状线
          show: false,
        },
      },
      yAxis: {
        type: "value",
        min: 0,
        max: 30000,
        interval: 3000,
        offset: -10,

        name: "(元)",
        nameTextStyle: {
          align: "right",
          fontWeight: "bold",
          padding: [0, 44, 0, 0],
        },
        nameGap: -5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#CFCFCF",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#333333",
          },
        },
        axisLabel: {
          formatter: (val, key) => {
            if (key % 2 == 0) {
              return val;
            }
          },
        },
      },
      series: [
        {
          type: "bar",
          data: [
            24000, 14800, 23000, 28000, 15000, 20000, 15000, 29000, 6000, 12000,
          ],
          barWidth: "30%",
          itemStyle: {
            // barBorderRadius: 5,
            // borderWidth: 0.2,
            // borderType: "solid",
            color: this.randomcolor,
            // shadowBlur: 3,
            emphasis: {
              barWidth: "50%",
            },
          },
        },
      ],
    };
    const E = echarts.init(this.$refs.barChart);
    E.setOption(option);
  },
  computed: {},
  data() {
    return {};
  },
  methods: {
    randomcolor() {
      var a = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      var c = Math.floor(Math.random() * 256);
      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: `rgb(${a}, ${b}, ${c})` },
        { offset: 1, color: `rgba(255,255,255,0)` },
      ]);
    },
  },
};
</script>

<style lang="less" scoped>
#mainchart {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  // background-color: lightblue;
  margin-top: 0px;
}
</style>